<template>
  <view>
    <canvas canvas-id="playbillCanvas"></canvas>
    <div class="container">
      <p>生成的内容</p>
      <img src="share.png"/>
    </div>
    <button @click="drawCanvas">生成图片</button>



    <!-- 海报模态框 -->
    <view>
      <u-popup v-model="posterShow" mode="center" width="100%" height="100%">
        <view class="posterShowView" style="width: 100%; height: 100%;">
          <!-- mode="widthFix" -->
          <img :src="posterUrl"  style="width: 400px; height: 200px;"/>
        </view>
        <view class="footerPoster" style="margin-top: 20rpx; margin-bottom: 20rpx;">
          <button style="font-size: 32rpx; " type="sure"  @click="posterCancal">取消</button>
          <button style="font-size: 32rpx; margin-left: 30rpx;" type="sure" @click="posterSure">保存</button>
        </view>
      </u-popup>
    </view>

  </view>
</template>

<script>
export default {
  name: "jietu2",
  data(){
    return{
      posterUrl: 'https://img13.360buyimg.com/n5/jfs/t15574/103/2503735642/354259/239cea20/5aaf4e5cN7ed2aacd.jpg',//图片地址
      areaImage: null,

    }
  },
  methods:{
    posterSure(){
      uni.downloadFile({
        url: this.posterUrl,
        success: function (res) {
          console.log(res)
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (res) {
              console.log(res)
              console.log('success')
              if (res.statusCode === 200) {
                console.log('下载成功');
              }
            },
            fail: function (res) {
              console.log(res)
              console.log('fail')
            }
          })
        },
        fail: function () {
          console.log('fail')
        }
      })
    },

    drawCanvas() {

      var _this = this;

      var context = uni.createCanvasContext('playbillCanvas');

      context.drawImage(_this.areaImage, 0, 0, uni.upx2px(550), uni.upx2px(750));

      context.draw(true);


      base64ToPath(_this.qr).then(path => {

        context.save();

        context.drawImage(path, _this.oldImage.imageX, _this.oldImage.imageY, uni.upx2px(_this.image_size), uni.upx2px(

            _this.image_size));

        context.restore();

        context.draw(true);

      }).catch(error => {

        console.error(error)

      })



      context.save();

      context.setFontSize(uni.upx2px(_this.textFontSize));

      context.setFillStyle(_this.textColor);

      context.fillText(_this.message, _this.oldText.textX, _this.oldText.textY+10);

      context.restore();

      context.draw(true);



      setTimeout(function() {

        uni.canvasToTempFilePath({

          canvasId: 'playbillCanvas',

          success: function(res) {

            uni.hideLoading();

            const imageList = [];

            imageList.push(res.tempFilePath);

            uni.previewImage({

              urls: imageList,

              indicator: "default",

              loop: false

            });

          },

          fail: function() {

            uni.hideLoading();

            uni.showToast({

              title: "生成海报失败！"

            });

          }

        })

      }, 2000);

    },
  }
}
</script>

<style scoped>

</style>